<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>吸底input的bug3</title>
  <script>
    (function () { var b = document.createElement("meta"); b.setAttribute("name", "viewport"); var c = window.devicePixelRatio, a = c ? 1 / c : 1; window.screen.availWidth == document.documentElement.offsetWidth && (c = a = 1); document.documentElement.setAttribute("data-dpr", c || 1); window.navigator.userAgent.match(/android/i) ? b.setAttribute("content", "width=device-width, initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no") : b.setAttribute("content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no"); document.head.appendChild(b) })();
    var dpr = document.documentElement.getAttribute("data-dpr") || 1, width = document.documentElement.offsetWidth, fontSize = 100 / 750 * width; document.querySelector("html").style.fontSize = fontSize + "px"; window.addEventListener("resize", function () { var a = 100 / 750 * document.querySelector("html").offsetWidth; document.querySelector("html").style.fontSize = a + "px" });
  </script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background: #eee;
    }
    .main{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .write{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1.50rem;
      border-top: 1px solid #cacaca;
      background: #fdfdfd;
    }
    .write input{
      display: block;
      width: 80%;
      padding: .25rem .2rem;
      margin: .2rem auto;
      outline: none;
      border: 1px solid #d2d2d2;
      box-shadow: 0px 2px 8px 0px #e4e4e4;
    }
    .write input:focus{
      border: 1px solid skyblue
    }
    .header{
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background: tomato;
      color: #fff;
      font-size: .2rem;
      text-align: center;
      padding: .1rem 0;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="header">置顶元素，不能上去</div>
    <div class="cont">
      <h1>input 被遮挡测试，让body元素超过一整页，再试试会不会input框被弹上去。 </h1>
      <p>input没有上去，但是整个页面都翻到最底部了</p>
    </div>
    <div class="write">
      <input type="text" placeholder="请输入手机号">
    </div>
  </div>
</body>

</html>